<template>
	
	<view class="">
		<view class="">
			
			<view class="m-h1" style="text-align: center;">
				砌块
			</view>
			<view class="" @tap="toBack()">
				<image class="nav-margin-back-img" src="../../static/back.png" mode="widthFix"></image>
			</view>
		</view>
		
		<view>
		    
		    <uni-popup ref="popup" type="bottom">
				<view class="content-5">
					<view @tap="closePopup" class="" style="display: flex;justify-content: flex-end;padding: 18rpx;">
						<image style="width: 36rpx;height: 36rpx;" src="../../static/close.png" mode="widthFix"></image>
					</view>
					<view class="content-body" style="">
						<view class="c-content" style="">
								<view class="c-h2">
									添加到清单
								</view>
								<view class="m-p-mini" style="margin: 20rpx 0;">
									您可将此商品添加如清单，统一下单结算
								</view>
							</view>
							
							<view class="content-flex m-margin-bottom">
								<view class="e-input">
									<view class="">
										<input class="content-input" type="text" placeholder="查找或创建您的清单" value="" />
									</view>	
								</view>		
							</view>
							
							<view @tap="isC = !isC" style="display: flex;justify-content: space-between;">
								<view  class="" style="display: flex;justify-content: flex-start;">
									<view class="">
										<image style="width: 120rpx;height: 80rpx;margin-right: 18rpx;" src="https://emos-lei.oss-cn-beijing.aliyuncs.com/v2/img/banner3.png" mode="widthFix"></image>
									</view>
									<view class="font-h" style="position: relative;top: 30rpx;">
										长兴县沙葛小学项目一期
									</view>
								</view>
								<view v-if="isC" class="">
									<image style="width: 48rpx;height: 48rpx; position: relative;top: 30rpx;" src="../../static/right.png" mode=""></image>
								</view>
							</view>
							<view @tap="isC = !isC" class="" style="display: flex;justify-content: space-between;">
								<view  class="" style="display: flex;justify-content: flex-start;">
									<view class="">
										<image style="width: 120rpx;height: 80rpx;margin-right: 18rpx;" src="https://emos-lei.oss-cn-beijing.aliyuncs.com/v2/img/banner3.png" mode="widthFix"></image>
									</view>
									<view class="font-h" style="position: relative;top: 30rpx;">
										长兴县沙葛小学项目二期
									</view>
								</view>
								
								<view v-if="!isC" class="">
									<image style="width: 48rpx;height: 48rpx; position: relative;top: 30rpx;" src="../../static/right.png" mode=""></image>
								</view>
							</view>
						
							<view @click="close()" class="">
								<button class="enter" type="default">
									<text style="position: relative;top:20rpx">确定添加</text>
								</button>
							</view>
						</view>
						
						
						
					</view>
					
		    </uni-popup>
		</view>
		<!-- 弹出框 -->
		
		<view v-if="isShowP" class="content-1">
			<view class="content-body">
				<view class="c-content" style="margin-top: 60rpx;">
					<view class="c-h2">
						定金比例
					</view>
					<view class="m-p-mini">
						我们支持最低20%的预付定金，提货时支付尾款
					</view>
				</view>
				
				<view class="" style="display: flex;justify-content: center;margin-top: 36rpx;">
					<text class="c-rang">{{value}}</text><text class="c-rang-1" style="position: relative;top: 12rpx;left: 6rpx;">%</text>
					
				</view>
				<view class="m-margin-bottom">
				   <slider max="100" min="20" :value="value" @change="sliderChange" step="5" />
				 </view>
				 <view class="c-h2">
				 	每立方米单价
				 </view>
				 <view class="m-p-mini m-margin-bottom">
				 	您可根据需求设置每立方米的区间价
				 </view>
				 
				 <view class="content-flex m-margin-bottom">
				 	
				 	<view class="content-list-box">
						<view class="" style="position: relative;top:25rpx">
							<input type="text" value="" maxlength="6" placeholder="最低价格"/>
						</view> 		
				 	</view>
				 	
					<view class="" style=" background-color: #1B4098;width: 30rpx;height: 2rpx; position: relative;top: 50rpx;">
						
					</view>
					<view class="content-list-box">
						<view class="" style="position: relative;top:25rpx" >
							<input  type="text" value="" maxlength="6" placeholder="最高价格"/>
						</view>		
					</view>
					
				 </view>
				 
				 
				 <view class="" style="display: flex;justify-content: space-between;">
				 	<view class="">
				 		<button class="c-but-font-1" type="default" style="width: 300rpx; height: 80rpx;border: 2rpx solid #1B4098;">
				 			<text  style="position: relative;top:20rpx;">重置</text>	
				 		</button>
				 	</view>
				 	<view class="">
				 		<button class="c-but-font-2" type="default" style="width: 300rpx; height: 80rpx;background-color: #1B4098;">
				 			<text style="position: relative;top:20rpx;">立即搜索</text>
				 		</button>
				 	</view>
				 </view>
				
			</view>
		</view>
		
		<!--弹出框二-->
		<view v-if="isShowR" class="content-2">
			<view class="content-body">
				<view class="c-content" style="margin-top: 60rpx;">
					
					<view class="m-margin-bottom">
						<text class="c-h2">默认框度</text>
						<text class="c-h2-r">（默认600mm,不可调整）</text>
					</view>
					
					<view class="c-h2">
						选择厚度
					</view>
					<view class="m-p-mini m-margin-bottom">
						根据您的需要选择对应厚度
					</view>
					<view class="" style="display: flex;justify-content: space-between;margin-bottom: 20rpx;">
						
						<view @tap="isActive('isActive1')" class="c-list-box" :class="[isActive1?'c-isActive-box':'']">
							<view  style="display: flex;justify-content: center;">
								<view :class="[isActive1?'c-isActive-font':'']" style="position: relative;top: 25rpx;">
									100
								</view>
							</view>
						</view>
						<view @tap="isActive('isActive2')" class="c-list-box" :class="[isActive2?'c-isActive-box':'']">
							<view  style="display: flex;justify-content: center;">
								<view :class="[isActive2?'c-isActive-font':'']" style="position: relative;top: 25rpx;">
									120
								</view>
							</view>
						</view>
						<view @tap="isActive('isActive3')" class="c-list-box" :class="[isActive3?'c-isActive-box':'']">
							<view  style="display: flex;justify-content: center;">
								<view :class="[isActive3?'c-isActive-font':'']" style="position: relative;top: 25rpx;">
									125
								</view>
							</view>
						</view>
					</view>
					
					<view class="m-margin-bottom" style="display: flex;justify-content: space-between;margin-bottom: 20rpx;">
						<view @tap="isActive('isActive4')" class="c-list-box" :class="[isActive4?'c-isActive-box':'']" >
							<view  style="display: flex;justify-content: center;">
								<view :class="[isActive4?'c-isActive-font':'']" style="position: relative;top: 25rpx;">
									150
								</view>
							</view>
						</view>
						<view @tap="isActive('isActive5')" class="c-list-box" :class="[isActive5?'c-isActive-box':'']">
							<view  style="display: flex;justify-content: center;">
								<view :class="[isActive5?'c-isActive-font':'']" style="position: relative;top: 25rpx;">
									175
								</view>
							</view>
						</view>
						<view @tap="isActive('isActive6')" class="c-list-box" :class="[isActive6?'c-isActive-box':'']">
							<view  style="display: flex;justify-content: center;">
								<view :class="[isActive6?'c-isActive-font':'']" style="position: relative;top: 25rpx;">
									200
								</view>
							</view>
						</view>
					</view>
					
					<view class="c-h2" style="margin-top: 36rpx;">
						调整长度
					</view>
					<view class="m-p-mini m-margin-bottom">
						您可根据需求设置砌块单体长度
					</view>
					
				</view>
				
				<view class="" style="display: flex;justify-content: center;margin-top: 36rpx;">
					<text class="c-rang">{{value1}}</text><text class="c-rang-1" style="position: relative;top: 12rpx;left: 6rpx;">mm</text>
					
				</view>
				<view class="m-margin-bottom">
				   <slider max="3200" min="1800" :value="value1" @change="sliderChange1" step="10" />
				 </view>

						 
				 <view class="" style="display: flex;justify-content: space-between;margin-top: 36rpx;">
				 	<view class="">
				 		<button class="c-but-font-1" type="default" style="width: 300rpx; height: 80rpx;border: 2rpx solid #1B4098;">
				 			<text  style="position: relative;top:20rpx;">重置</text>	
				 		</button>
				 	</view>
				 	<view class="">
				 		<button class="c-but-font-2" type="default" style="width: 300rpx; height: 80rpx;background-color: #1B4098;">
				 			<text style="position: relative;top:20rpx;">立即搜索</text>
				 		</button>
				 	</view>
				 </view>
				
			</view>
		</view>
		
		<!-- 弹出框三 -->
		<view v-if="isShowO" class="content-1">
			<view class="content-body">
				<view class="c-content" style="margin-top: 60rpx;">
					
					<view class="">
						<view @tap="isRight('isRight1')" class="c-right-box c-right-bottom" style="display: flex;justify-content: space-between;">
							<view class="c-right-font">
								综合排序（默认）
							</view>
							<view v-if="isRight1" class="">
								<image class="c-right" src="../../static/right.png" mode=""></image>
							</view>
						</view>
						
						<view @tap="isRight('isRight2')" class="c-right-box c-right-bottom" style="display: flex;justify-content: space-between;">
							<view class="c-right-font">
								价格从低到高
							</view>
							<view v-if="isRight2" class="">
								<image class="c-right" src="../../static/right.png" mode=""></image>
							</view>
						</view>
						
						<view @tap="isRight('isRight3')" class="c-right-box c-right-bottom" style="display: flex;justify-content: space-between;">
							<view class="c-right-font">
								价格从高到低
							</view>
							<view v-if="isRight3" class="">
								<image class="c-right" src="../../static/right.png" mode=""></image>
							</view>
						</view>
						
						<view @tap="isRight('isRight4')" class="c-right-box c-right-bottom " style="display: flex;justify-content: space-between;">
							<view class="c-right-font">
								交付周期长
							</view>
							<view v-if="isRight4" class="">
								<image class="c-right" src="../../static/right.png" mode=""></image>
							</view>
						</view>
						
						<view @tap="isRight('isRight5')" class="c-right-box  m-margin-bottom" style="display: flex;justify-content: space-between;">
							<view class="c-right-font">
								交付周期短
							</view>
							<view v-if="isRight5" class="">
								<image class="c-right" src="../../static/right.png" mode=""></image>
							</view>
						</view>
						
						
						
					</view>
				</view>


				 <view class="" style="display: flex;justify-content: space-between;">
				 	<view class="">
				 		<button class="c-but-font-1" type="default" style="width: 300rpx; height: 80rpx;border: 2rpx solid #1B4098;">
				 			<text  style="position: relative;top:20rpx;">重置</text>	
				 		</button>
				 	</view>
				 	<view class="">
				 		<button class="c-but-font-2" type="default" style="width: 300rpx; height: 80rpx;background-color: #1B4098;">
				 			<text style="position: relative;top:20rpx;">立即搜索</text>
				 		</button>
				 	</view>
				 </view>
				
			</view>
		</view>
		
		<!-- 弹出框四 -->
		<view v-if="isShowS" class="content-4">
			<view class="content-body">
				<view class="c-content" style="margin-top: 60rpx;">
						
					<view class="c-h2">
						购买量
					</view>
					<view class="m-p-mini m-margin-bottom">
						购买量请高于我们的40m³起订量
					</view>	
					
					
					<view class="content-flex" style="margin-top: 64rpx;">
						<view class="e-input">
							<view class="">
								<input class="content-input" type="text" placeholder="请输入您的起定量" value="" />
							</view>	
						</view>		
					</view>
					<text style="position:relative;top: -70rpx;left: 604rpx;">m³</text>
						
					<view class="c-h2">
						交货周期
					</view>
					<view class="m-p-mini m-margin-bottom">
						请根据您的需求选择适合的类型进行定制
					</view>	
					
					
					<view class="content-flex" style="margin-top: 64rpx;">
						<view class="content-list-box">
							<view class="uni-list-cell-db">
							    <picker class="en-h3" mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
							        <view class="uni-input">{{date}}</view>
							    </picker>
							</view>
								
						</view>
						<view class="" style=" background-color: #1B4098;width: 30rpx;height: 2rpx; position: relative;top: 50rpx;">
							
						</view>
						<view class="content-list-box">
							
							<view class="uni-list-cell-db">
							    <picker class="en-h3" mode="date" :value="date2" :start="startDate2" :end="endDate2" @change="bindDateChange2">
							        <view class="uni-input">{{date2}}</view>
							    </picker>
							</view>
								
						</view>
					</view>
					
					
					
								
					<view class="c-h2">
						砌块等级
					</view>
					<view class="m-p-mini m-margin-bottom">
						请根据您的需求选择适合的等级
					</view>
					<view class="" style="display: flex;justify-content: space-between;margin-bottom: 20rpx;">
						
						<view @tap="isQieKuai('isQieKuai1')" class="c-list-box" :class="[isQieKuai1?'c-isActive-box':'']">
							<view  style="display: flex;justify-content: center;">
								<view :class="[isQieKuai1?'c-isActive-font':'']" style="position: relative;top: 25rpx;">
									100
								</view>
							</view>
						</view>
						<view @tap="isQieKuai('isQieKuai2')" class="c-list-box" :class="[isQieKuai2?'c-isActive-box':'']">
							<view  style="display: flex;justify-content: center;">
								<view :class="[isQieKuai2?'c-isActive-font':'']" style="position: relative;top: 25rpx;">
									120
								</view>
							</view>
						</view>
						<view @tap="isQieKuai('isQieKuai3')" class="c-list-box" :class="[isQieKuai3?'c-isActive-box':'']">
							<view  style="display: flex;justify-content: center;">
								<view :class="[isQieKuai3?'c-isActive-font':'']" style="position: relative;top: 25rpx;">
									125
								</view>
							</view>
						</view>
					</view>
					
					<view class="m-margin-bottom" style="display: flex;justify-content: flex-start;margin-bottom: 20rpx;">
						<view @tap="isQieKuai('isQieKuai4')" class="c-list-box" :class="[isQieKuai4?'c-isActive-box':'']" style="margin-right: 18rpx;" >
							<view  style="display: flex;justify-content: center;">
								<view :class="[isQieKuai4?'c-isActive-font':'']" style="position: relative;top: 25rpx;">
									150
								</view>
							</view>
						</view>
						<view @tap="isQieKuai('isQieKuai5')" class="c-list-box" :class="[isQieKuai5?'c-isActive-box':'']">
							<view  style="display: flex;justify-content: center;">
								<view :class="[isQieKuai5?'c-isActive-font':'']" style="position: relative;top: 25rpx;">
									175
								</view>
							</view>
						</view>
						
					</view>
					
					<view class="c-h2" style="margin-top: 36rpx;">
						构造要求
					</view>
					<view class="m-p-mini m-margin-bottom">
						请根据您的需求选择适合的构造
					</view>
					
					<view class="" style="display: flex;justify-content: space-between;margin-bottom: 20rpx;">
						
						<view @tap="isCheck('isCheck1')" class="c-list-box" :class="[isCheck1?'c-isActive-box':'']">
							<view  style="display: flex;justify-content: center;">
								<view :class="[isCheck1?'c-isActive-font':'']" style="position: relative;top: 25rpx;">
									槽口
								</view>
							</view>
						</view>
						<view @tap="isCheck('isCheck2')" class="c-list-box" :class="[isCheck2?'c-isActive-box':'']">
							<view  style="display: flex;justify-content: center;">
								<view :class="[isCheck2?'c-isActive-font':'']" style="position: relative;top: 25rpx;">
									平面
								</view>
							</view>
						</view>
						<view @tap="isCheck('isCheck3')" class="c-list-box" :class="[isCheck3?'c-isActive-box':'']">
							<view  style="display: flex;justify-content: center;">
								<view :class="[isCheck3?'c-isActive-font':'']" style="position: relative;top: 25rpx;">
									手孔槽口
								</view>
							</view>
						</view>
					</view>
				</view>
				
				
				<view class="content-flex" style="margin-top: 64rpx;">
					<view class="e-input">
						<view class="">
							<input class="content-input" type="text" placeholder="请输入自定义构造要求" value="" />
						</view>	
					</view>		
				</view>
		
						 
				 <view class="" style="display: flex;justify-content: space-between;margin-top: 36rpx;">
				 	<view class="">
				 		<button class="c-but-font-1" type="default" style="width: 300rpx; height: 80rpx;border: 2rpx solid #1B4098;">
				 			<text  style="position: relative;top:20rpx;">重置</text>	
				 		</button>
				 	</view>
				 	<view class="">
				 		<button class="c-but-font-2" type="default" style="width: 300rpx; height: 80rpx;background-color: #1B4098;">
				 			<text style="position: relative;top:20rpx;">立即搜索</text>
				 		</button>
				 	</view>
				 </view>
				
			</view>
		</view>
		
		
		
		
		<view class="" >
			<view class="nav-margin-top p-flex content-body" style="margin-bottom: 20rpx; padding-bottom: 20rpx; border-bottom: 2rpx solid #F0F0F0;">
		

			<view class="" @tap="isShow('isShowP')">
				<text class=" p-font-margin" :class="[isShowP?'p-font-active':'p-font']" >价格</text>
				<image src="../../static/down.png" class="q-img" mode=""></image>
			</view>
			
			<view class="" @tap="isShow('isShowR')">
				<text class="p-font-margin" :class="[isShowR?'p-font-active':'p-font']">规格</text>
				<image src="../../static/down.png" class="q-img" mode=""></image>
			</view>
			<view @tap="isShow('isShowO')">
				<text class="p-font-margin" :class="[isShowO?'p-font-active':'p-font']">排序</text>
				<image src="../../static/down.png" class="q-img" mode=""></image>
			</view> 
			<view @tap="isShow('isShowS')" class=" ">
				<text class="p-font-margin" :class="[isShowS?'p-font-active':'p-font']">筛选</text>
				<image src="../../static/down.png" class="q-img" mode=""></image>
			</view> 
		</view>
	</view>
	
	<view :class="[isBg?'f-bg-content':'']">
		
	</view>
	
	<view >
		<view >
			<view class="q-content-list" >
				
				<view class="">
					<view class="" @tap="toDetail()">
						<view class="m-list-flex ">
								<view class="">
									<text class="m-list-font-mini">等级：B05A3.5</text>
								</view>
								<view class="">
									<text class="m-list-font-mini-r">2月8日结束</text>
								</view>
						</view>
						
						<view class="" style="">
							<text class="m-h2-a">常规砌块</text>
						</view>
						<view class="">
							<text class="m-list-font-mini">规格(LxBxH)：600mm*200mm*250mm</text>
						</view>
						
						<view style="margin-top: 16rpx;">
							<uni-list>
								<uni-list-item title="" note="" class="m-list-box-4 m-list-left-f">
									<text class="m-font-padding m-list-font-mini-active">定金80% </text>
								</uni-list-item>
								<uni-list-item title="" note="" class="m-bg m-list-left-f">
									<text class="m-font-padding m-list-font-mini">40m³起订</text>
								</uni-list-item>
								<uni-list-item title="" note="" class="m-bg m-list-left-f">
									<text class="m-font-padding m-list-font-mini">100km内</text>
								</uni-list-item>
								<uni-list-item title="" note="" class="m-bg m-list-left-f">
									<text class="m-font-padding m-list-font-mini">工厂自提</text>
								</uni-list-item>
							</uni-list>
						</view>
					</view>
					
					<view class="m-border-bottom" style="display: flex;justify-content: space-between;margin: 34rpx 0;padding-bottom: 29rpx;">
						
						<view class="m-price">
							<view class="m-price-a" style="display: flex;">
								<view class="" >
									￥150.00/m³
								</view> 
								<view class="m-list-font-mini"  style="margin-left: 10rpx;font-size: 16rpx;color: #D93535;">
									含税
								</view>
							</view>
							<view class="m-price-b">
								￥190.00/m³
							</view>
						</view>
						<view style="display: flex;">
							<image @tap="openPopup" class="img-add" src="../../static/add1.png" mode="widthFix"></image>
							<button type="default" class="list-btn">立即选购</button>
						</view>
					</view>
				</view>
				
				
					
				<view class="">
					<view class="" @tap="toDetail()">
						<view class="m-list-flex ">
								<view class="">
									<text class="m-list-font-mini">等级：B05A3.5</text>
								</view>
								<view class="">
									<text class="m-list-font-mini-r">2月8日结束</text>
								</view>
						</view>
						
						<view class="" style="">
							<text class="m-h2-a">常规砌块</text>
						</view>
						<view class="">
							<text class="m-list-font-mini">规格(LxBxH)：600mm*200mm*250mm</text>
						</view>
						
						<view style="margin-top: 16rpx;">
							<uni-list>
								<uni-list-item title="" note="" class="m-list-box-4 m-list-left-f">
									<text class="m-font-padding m-list-font-mini-active">付全款</text>
								</uni-list-item>
								<uni-list-item title="" note="" class="m-bg m-list-left-f">
									<text class="m-font-padding m-list-font-mini">40m³起订</text>
								</uni-list-item>
								<uni-list-item title="" note="" class="m-bg m-list-left-f">
									<text class="m-font-padding m-list-font-mini">100km内</text>
								</uni-list-item>
								<uni-list-item title="" note="" class="m-bg m-list-left-f">
									<text class="m-font-padding m-list-font-mini">工厂自提</text>
								</uni-list-item>
							</uni-list>
						</view>
					</view>
					
					<view class="m-border-bottom" style="display: flex;justify-content: space-between;margin: 34rpx 0;padding-bottom: 29rpx;">
						
						<view class="m-price">
							<view class="m-price-a" style="display: flex;">
								<view class="" >
									￥110.00/m³
								</view> 
								<view class="m-list-font-mini"  style="margin-left: 10rpx;font-size: 16rpx;color: #D93535;">
									含税
								</view>
							</view>
							
							<view class="m-price-b">
								￥180.00/m³
							</view>
						</view>
						<view style="display: flex;">
							<image @tap="openPopup" class="img-add" src="../../static/add1.png" mode="widthFix"></image>
							<button type="default" class="list-btn">立即选购</button>
						</view>
					</view>
				</view>
				
				
				<view class="">
					<view class="" @tap="toDetail()">
						<view class="m-list-flex ">
								<view class="">
									<text class="m-list-font-mini">等级：B05A3.5</text>
								</view>
								<view class="">
									<text class="m-list-font-mini-r">2月8日结束</text>
								</view>
						</view>
						
						<view class="" style="">
							<text class="m-h2-a">常规砌块</text>
						</view>
						<view class="">
							<text class="m-list-font-mini">规格(LxBxH)：600mm*200mm*250mm</text>
						</view>
						
						<view style="margin-top: 16rpx;">
							<uni-list>
								<uni-list-item title="" note="" class="m-list-box-4 m-list-left-f">
									<text class="m-font-padding m-list-font-mini-active">付全款</text>
								</uni-list-item>
								<uni-list-item title="" note="" class="m-bg m-list-left-f">
									<text class="m-font-padding m-list-font-mini">60m³起订</text>
								</uni-list-item>
								<uni-list-item title="" note="" class="m-bg m-list-left-f">
									<text class="m-font-padding m-list-font-mini">100km内</text>
								</uni-list-item>
								<uni-list-item title="" note="" class="m-bg m-list-left-f">
									<text class="m-font-padding m-list-font-mini">工厂自提</text>
								</uni-list-item>
							</uni-list>
						</view>
					</view>
					
					<view class="m-border-bottom" style="display: flex;justify-content: space-between;margin: 34rpx 0;padding-bottom: 29rpx;">
						
						<view class="m-price">
							<view class="m-price-a" style="display: flex;">
								<view class="" >
									¥100.00/m³
								</view> 
								<view class="m-list-font-mini"  style="margin-left: 10rpx;font-size: 16rpx;color: #D93535;">
									含税
								</view>
							</view>
						
							<view class="m-price-b">
								¥200.00/m³
							</view>
						</view>
						<view style="display: flex;">
							<image @tap="openPopup" class="img-add" src="../../static/add1.png" mode="widthFix"></image>
							<button type="default" class="list-btn">立即选购</button>
						</view>
					</view>
				</view>
				
				
				<view class="">
					<view class="" @tap="toDetail()">
						<view class="m-list-flex ">
								<view class="">
									<text class="m-list-font-mini">等级：B05A3.5</text>
								</view>
								<view class="">
									<text class="m-list-font-mini-r">2月8日结束</text>
								</view>
						</view>
						
						<view class="" style="">
							<text class="m-h2-a">常规砌块</text>
						</view>
						<view class="">
							<text class="m-list-font-mini">规格(LxBxH)：600mm*200mm*250mm</text>
						</view>
						
						<view style="margin-top: 16rpx;">
							<uni-list>
								<uni-list-item title="" note="" class="m-list-box-4 m-list-left-f">
									<text class="m-font-padding m-list-font-mini-active">定金70%</text>
								</uni-list-item>
								<uni-list-item title="" note="" class="m-bg m-list-left-f">
									<text class="m-font-padding m-list-font-mini">30m³起订</text>
								</uni-list-item>
								<uni-list-item title="" note="" class="m-bg m-list-left-f">
									<text class="m-font-padding m-list-font-mini">100km内</text>
								</uni-list-item>
								<uni-list-item title="" note="" class="m-bg m-list-left-f">
									<text class="m-font-padding m-list-font-mini">工厂自提</text>
								</uni-list-item>
							</uni-list>
						</view>
					</view>
					
					<view class="m-border-bottom" style="display: flex;justify-content: space-between;margin: 34rpx 0;padding-bottom: 29rpx;">
						
						<view class="m-price">
							<view class="m-price-a" style="display: flex;">
								<view class="" >
									￥120.00/m³
								</view> 
								<view class="m-list-font-mini"  style="margin-left: 10rpx;font-size: 16rpx;color: #D93535;">
									含税
								</view>
							</view>
							
							<view class="m-price-b">
								¥200.00/m³
							</view>
						</view>
						<view style="display: flex;">
							<image @tap="openPopup" class="img-add" src="../../static/add1.png" mode="widthFix"></image>
							<button type="default" class="list-btn">立即选购</button>
						</view>
					</view>
				</view>
				
				
				<view class="">
					<view class="" @tap="toDetail()">
						<view class="m-list-flex ">
								<view class="">
									<text class="m-list-font-mini">等级：B05A3.5</text>
								</view>
								<view class="">
									<text class="m-list-font-mini-r">2月8日结束</text>
								</view>
						</view>
						
						<view class="" style="">
							<text class="m-h2-a">常规砌块</text>
						</view>
						<view class="">
							<text class="m-list-font-mini">规格(LxBxH)：600mm*200mm*250mm</text>
						</view>
						
						<view style="margin-top: 16rpx;">
							<uni-list>
								<uni-list-item title="" note="" class="m-list-box-4 m-list-left-f">
									<text class="m-font-padding m-list-font-mini-active">定金70%</text>
								</uni-list-item>
								<uni-list-item title="" note="" class="m-bg m-list-left-f">
									<text class="m-font-padding m-list-font-mini">30m³起订</text>
								</uni-list-item>
								<uni-list-item title="" note="" class="m-bg m-list-left-f">
									<text class="m-font-padding m-list-font-mini">100km内</text>
								</uni-list-item>
								<uni-list-item title="" note="" class="m-bg m-list-left-f">
									<text class="m-font-padding m-list-font-mini">含物流配送</text>
								</uni-list-item>
							</uni-list>
						</view>
					</view>
					
					<view class="m-border-bottom" style="display: flex;justify-content: space-between;margin: 34rpx 0;padding-bottom: 29rpx;">
						
						<view class="m-price">
							<view class="m-price-a" style="display: flex;">
								<view class="" >
									¥105.00/m³
								</view> 
								<view class="m-list-font-mini"  style="margin-left: 10rpx;font-size: 16rpx;color: #D93535;">
									含税
								</view>
							</view>
							
							<view class="m-price-b">
								¥200.00/m³
							</view>
						</view>
						<view style="display: flex;">
							<image @tap="openPopup" class="img-add" src="../../static/add1.png" mode="widthFix"></image>
							<button type="default" class="list-btn">立即选购</button>
						</view>
					</view>
				</view>
			</view>
	</view>
	
		
	</view>
		
		
		
		
		
		
		
	</view>
</template>

<script>
	import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
	import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	export default {
		components: {
			uniCollapse,
			uniCollapseItem,
			uniPopup,
			uniPopupMessage,
			uniPopupDialog},
		data() {
			const currentDate = this.getDate({
			            format: true
			        })
			return {
				isShowP:false,
				isShowR:false,
				isShowO:false,
				isShowS:false,
				value:20,
				value1:1800,
				isBg:false,
				isActive1:true,
				isActive2:false,
				isActive3:false,
				isActive4:false,
				isActive5:false,
				isActive6:false,
				isActive7:true,
				isRight1:false,
				isRight2:false,
				isRight3:false,
				isRight4:false,
				isRight5:false,
				date: '请选择最早日期',
				date2: '请选择最晚日期',
				isQieKuai1:true,
				isQieKuai2:false,
				isQieKuai3:false,
				isQieKuai4:false,
				isQieKuai5:false,
				isCheck1:false,
				isCheck2:false,
				isCheck3:false,
				isC:true,
				
			}
		},
		computed: {
			  
		        startDate() {
		            return this.getDate('start');
		        },
		        endDate() {
		            return this.getDate('end');
		        }
		    },
		methods: {
			close:function(){
				uni.showToast({
					icon:"none",
					title:"添加成功",
				})
				this.$refs.popup.close()
			},
			toOrder4:function(){
				uni.navigateTo({
					url:'../order-4/order-4'
				})
			},
			toDetail:function(){
				uni.navigateTo({
					url:'../enact-list/enact-list'
				})
			},
			 openPopup(){
			            this.$refs.popup.open()
			        },
			        closePopup(){
			            this.$refs.popup.close()
			        },
			isRight:function(a){
				if(a=='isRight1'){
					this.isRight1 = !this.isRight1;
					this.isRight2 = false;
					this.isRight3= false;
					this.isRight4 = false;
					this.isRight5 = false;
					
				}else if(a=='isRight2'){
					this.isRight1 = false;
					this.isRight2 = !this.isRight2;
					this.isRight3 = false;
					this.isRight4 = false;
					this.isRight5 = false;
				
				}else if(a=='isRight3'){
					this.isRight1 = false;
					this.isRight2 = false;
					this.isRight3 = !this.isRight3;
					this.isRight4 = false;
					this.isRight5 = false;
					
				}else if(a=='isRight4'){
					this.isRight1 = false;
					this.isRight2 = false;
					this.isRight3 = false;
					this.isRight5 = false;
					
					this.isRight4 = !this.isRight4;
				}else if(a=='isRight5'){
					this.isRight1 = false;
					this.isRight2 = false;
					this.isRight3 = false;
					this.isRight5 = !this.isActive5;
					this.isRight4 = false;
					
				}
			},
			
			isCheck:function(a){
				if(a=='isCheck1'){
					this.isCheck1 = !this.isCheck1;
					this.isCheck2 = false;
					this.isCheck3 = false;
					
				}else if(a=='isCheck2'){
					this.isCheck1 = false;
					this.isCheck2 = !this.isCheck2;
					this.isCheck3 = false;
				}else if(a=='isCheck3'){
					this.isCheck1 = false;
					this.isCheck2 = false;
					this.isCheck3 = !this.isCheck3;
				}
			},
			isActive:function(a){
				if(a=='isActive1'){
					this.isActive1 = !this.isActive1;
					this.isActive2 = false;
					this.isActive3 = false;
					this.isActive4 = false;
					this.isActive5 = false;
					this.isActive6 = false;
				}else if(a=='isActive2'){
					this.isActive1 = false;
					this.isActive2 = !this.isActive2;
					this.isActive3 = false;
					this.isActive4 = false;
					this.isActive5 = false;
					this.isActive6 = false;
				}else if(a=='isActive3'){
					this.isActive1 = false;
					this.isActive2 = false;
					this.isActive3 = !this.isActive3;
					this.isActive4 = false;
					this.isActive5 = false;
					this.isActive6 = false;
				}else if(a=='isActive6'){
					this.isActive1 = false;
					this.isActive2 = false;
					this.isActive3 = false;
					this.isActive4 = false;
					this.isActive5 = false;
					this.isActive6 = !this.isActive6;
				}else if(a=='isActive4'){
					this.isActive1 = false;
					this.isActive2 = false;
					this.isActive3 = false;
					this.isActive4 = !this.isActive4;
					this.isActive5 = false;
					this.isActive6 = false;
				}else if(a=='isActive5'){
					this.isActive1 = false;
					this.isActive2 = false;
					this.isActive3 = false;
					this.isActive4 = false;
					this.isActive5 = !this.isActive5;
					this.isActive6 = false;
				}
			},
			isQieKuai:function(a){
				if(a=='isQieKuai1'){
					this.isQieKuai1 = !this.isQieKuai1;
					this.isQieKuai2 = false;
					this.isQieKuai3 = false;
					this.isQieKuai4 = false;
					this.isQieKuai5 = false;
					
				}else if(a=='isQieKuai2'){
					this.isQieKuai1 = false;
					this.isQieKuai2 = !this.isQieKuai2;
					this.isQieKuai3 = false;
					this.isQieKuai4 = false;
					this.isQieKuai5 = false;
					
				}else if(a=='isQieKuai3'){
					this.isQieKuai1 = false;
					this.isQieKuai3 = false;
					this.isQieKuai3 = !this.isQieKuai3;
					this.isQieKuai4 = false;
					this.isQieKuai5 = false;
					
				}else if(a=='isQieKuai4'){
					this.isQieKuai1 = false;
					this.isQieKuai2 = false;
					this.isQieKuai3 = false;
					this.isQieKuai4 = !this.isQieKuai4;
					this.isQieKuai5 = false;
					
				}else if(a=='isQieKuai5'){
					this.isQieKuai1 = false;
					this.isQieKuai2 = false;
					this.isQieKuai3 = false;
					this.isQieKuai5 = !this.isQieKuai5;
					this.isQieKuai4 = false;
					
				}
			},
			
			isShow:function(type){
				this[type] = !this[type]
				if(type=='isShowO'){
					this.isShowP = false;
					this.isShowR = false;
					this.isShowS = false;
				}
				else if(type == 'isShowP'){
					this.isShowO = false;
					this.isShowR = false;
					this.isShowS = false;
					
				}
				else if(type== 'isShowR'){
					this.isShowP = false;
					this.isShowO = false;
					this.isShowS = false;
					
				}
				else if(type ==  'isShowS'){
					this.isShowP = false;
					this.isShowR = false;
					this.isShowO = false;
				
				}
				if(this[type]){
					this.isBg = true;
				}else{
					this.isBg = false;
				}
				
			},
			sliderChange(e) {
				this.value = e.detail.value;
				if(e.detail.value<20){
					this.value = 20
					uni.showToast({
						icon:"none",
						title:"定金比例必须大于等于20%",	
					})
				}
			 },
			 sliderChange1(e) {
			 	this.value1 = e.detail.value;
			 	if(e.detail.value1<1800){
			 		this.value = 1800
			 		uni.showToast({
			 			icon:"none",
			 			title:"长度必须大于等于1800mm",	
			 		})
			 	}
			  },
			toBack:function(){
				console.log(1)
				uni.navigateBack({
					delta: 1 //返回上一级页面
				})
			},
			bindDateChange: function(e) {
			            this.date = e.target.value
			        },
			        bindTimeChange: function(e) {
			            this.time = e.target.value
			        },
			        getDate(type) {
			            const date = new Date();
			            let year = date.getFullYear();
			            let month = date.getMonth() + 1;
			            let day = date.getDate();
			
			            if (type === 'start') {
			                year = year - 60;
			            } else if (type === 'end') {
			                year = year + 2;
			            }
			            month = month > 9 ? month : '0' + month;;
			            day = day > 9 ? day : '0' + day;
			            return `${year}-${month}-${day}`;
			        },
			bindDateChange2: function(e) {
			           this.date2 = e.target.value
			       },
			       bindTimeChange: function(e) {
			           this.time2 = e.target.value
			       },
			       getDate(type) {
			           const date = new Date();
			           let year = date.getFullYear();
			           let month = date.getMonth() + 1;
			           let day = date.getDate();
						
			           if (type === 'start') {
			               year = year - 60;
			           } else if (type === 'end') {
			               year = year + 2;
			           }
			           month = month > 9 ? month : '0' + month;;
			           day = day > 9 ? day : '0' + day;
			           return `${year}-${month}-${day}`;
			       }
		}
	}
</script>

<style scoped lang="less">
@import url("QiwKuaiList.less");
@import url("../../style.less");
@import url("../index/index.less");
@import url('../enact-1/enact-1.less');
@import url('../enact-2/enact-2.less');
</style>
